<template>
	<view class="chatLists">
		<!-- 好友列表 -->
		<view class="chatFriend" v-for="item in friendLists" :key="item.id" @click="goChat">
			<!-- 好友备注 -->
			<view class="friend">{{ item.friendRemark }}</view>
		</view>

		<!-- 群聊列表 -->

		<view class="chatGroud">
			<view class="choice">
				<view class="addMember item" click="addMember">添加成员</view>
				<view class="modify item" click="modifyNotice">修改公告</view>
			</view>
			<!-- 群聊名 -->
			<view class="groud" @click="enterGroup">{{ GroupLists.groupName }}</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';

import { onLoad } from '@dcloudio/uni-app';

const friendLists = ref([]);
const GroupLists = reactive({
	groupName: '',
	groupRemark: ''
});

// 获取token
const token = uni.getStorageSync('token');

const goChat = () => {
	uni.navigateTo({
		url: '/pages/chat/chat'
	});
};

// 添加成员
const addMember = (groupID) => {
	uni.navigateTo({
		url: `/pages/addGroudMember/addGroudMember?groupId=${groupId}`
	});
};

//修改群公告

//测试：加入群聊
const enterGroup = async () => {
	await uni.request({
		url: 'http://192.168.1.200:8080/groupInfo/addGroupMembers',
		method: 'POST',
		header: {
			'Content-Type': 'application/json',
			token: token
		},
		data: {
			userIds: [2],
			groupId: 1
		}
	});
};

onLoad(async () => {
	const baseUrl = 'http://192.168.1.200:8080';
	// 获取好友列表
	uni.request({
		url: `${baseUrl}/friendship/friendPage`,
		method: 'POST',
		header: {
			'Content-Type': 'application/json',
			token: token
		},
		success({ data }) {
			friendLists.value = data.data;
		}
	});

	//获取群聊
	uni.request({
		url: `${baseUrl}/groupInfo/findGroupById?groupId=1`,
		method: 'POST',
		header: {
			'Content-Type': 'application/json',
			token: token
		},
		success({ data }) {
			GroupLists.value = data.data;
			GroupLists.groupName = data.data.groupName;
		}
	});

	// console.log(getGroupLists);
	// GroupLists.value = getGroupLists.data.data
	// console.log(GroupLists.value);

	// GroupLists.groupName = getGroupLists.data.data.groupName;

	const ws = uni.connectSocket({
		url: `ws://192.168.1.200:7891/chat?token=${token}`,
		success: () => console.log('✅ WebSocket 连接成功')
	});
	ws.onopen = () => {
		console.log('WebSocket连接已建立');
	};
	ws.onError((error) => {
		console.error(error);
	});
	ws.onMessage((message) => {
		console.log(message);
	});

	//重连 --- setInterval
});
</script>

<style lang="scss" scoped>
.chatLists {
	margin-top: 30rpx;

	.chatFriend {
		width: 96%;
		height: 100rpx;
		background-color: #d7e4e6;
		margin: 0 auto;
		overflow: hidden;
		margin-top: 4rpx;

		.friend {
			margin-left: 40rpx;
			width: 200rpx;
			height: 80rpx;
			background-color: white;
			border-radius: 100rpx;
			margin-top: 10rpx;
			color: #add8e6;
			text-align: center;
			line-height: 80rpx;
			font-weight: bold;
		}
	}

	.chatGroud {
		width: 96%;
		height: 100rpx;
		background-color: #d7e4e6;
		margin: 0 auto;
		overflow: hidden;
		margin-top: 4rpx;
		position: relative;

		.groud {
			margin-left: 40rpx;
			width: 200rpx;
			height: 80rpx;
			background-color: white;
			border-radius: 100rpx;
			margin-top: 10rpx;
			color: #add8e6;
			text-align: center;
			line-height: 80rpx;
			font-weight: bold;
		}

		.choice {
			width: 400rpx;
			height: 60rpx;
			position: absolute;
			z-index: 999;

			line-height: 60rpx;
			margin-top: 40rpx;
			margin-left: 260rpx;

			.item {
				width: 40%;
				display: inline-block;
				margin: 0 2rpx;
				background-color: wheat;
				text-align: center;
				border-radius: 20rpx;
			}
		}
	}
}
</style>
